<template>
  <el-card style="margin:15px 25px 80px 10px">
    <template #header  v-if="route.query.name">
      <el-breadcrumb
        :separator-icon="ArrowRight"
       
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <div class="head" style="display:flex;justify-content: space-between;">
      <div class="big" style="display:flex" >
        <div class="one">
          <span style="margin-right:10px">目录名称</span>
          <el-input
            v-model="input"
            style="width:200px"
          />
        </div>
        <div class="two" style="margin-left:20px">
          状态：<el-select
            v-model="selectValue"
            filterable
            placeholder="Select"
            style="width:200px"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            style="margin-left:10px"
            @click="clear"
          >清除</el-button>
          <el-button type="primary"  @click="submitForm">搜索</el-button>
        </div>
      </div>
      <div class="three" >
        <span
          style="margin:0 10px;color:#7fb1ff;cursor: pointer;display: inline-block;"
          @click="router.push
        ('/subjects/list')"
          v-if="route.query.id"
        >
          <el-icon>
            <Back />
          </el-icon>返回学科
        </span>
        <el-button
          type="success"
          style="width:100px;color: white;"
          @click="changeSet('')"
        >
          <el-icon style="vertical-align: middle;color: white;">
            <EditPen style="color: white;" />
          </el-icon>
          新增目录
        </el-button>
      </div>
    </div>
    <div class="text" style="margin-top:10px">
      <el-alert
        type="info"
        show-icon
        :title="'数据一共'+list.counts+'条'"
      >
      </el-alert>
    </div>
    <div class="dataList">
      <el-table
        :data="list.items"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="创建者"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180"
        >
          <template v-slot="{row}">{{parseTimeByString(row.addDate)}}</template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="100"
        >
          <template v-slot="{row}">{{row.state===1?'已启用':'已禁用'}}</template>
        </el-table-column>
        <el-table-column
          prop="actions"
          label="操作"
          width="180"
        >
          <template v-slot="{row}">
            <el-button type="primary" size="50" plain text @click="changStatus(row.id,row.state)">{{row.state == 1? '禁用':'启用'}}</el-button>
            <el-button type="primary" size="50" style="margin:0;padding: 0;" plain text :disabled="row.state == 1" 
            @click="changeSet(row.id,row)"
            >修改</el-button>
            <el-button  type="primary" size="50" style="margin:0" plain text
              @click="delTags(row.id)" :disabled="row.state == 1"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageBox">
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.page"
          v-model:page-size="page.pagesize"
          :page-size="[5,10,20,50]"
          :pager-count="5"
          layout="prev, pager, next, sizes, jumper"
          :total="list.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>
  <directorysAdd :inheritAttrs="inheritAttrs" @update:dialogVisible="inheritAttrs=false" :showId="showId" ref="formData" @getList="getdirectoryList({...page,subjectID:route.query.id || undefined})"></directorysAdd>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight, EditPen } from '@element-plus/icons-vue'
import { list, search } from '@/api/base/menus'
import { status } from '@/api/hmmm/constants'
import { list as directoryList, remove, changeState } from '@/api/hmmm/directorys.js'
import { onMounted, reactive, ref, watch } from 'vue'
import { parseTimeByString } from '@/filters/index.js'
import directorysAdd from '@/module-hmmm/components/directorys-add'
import { useRoute, useRouter } from 'vue-router'
export default {
  name: 'DirectoryPage',
  components: {directorysAdd},
  setup() {
    const inheritAttrs = ref(false)
    const showId = ref(undefined)
    const formData = ref()
    const route = useRoute()
    const router = useRouter()
    const list = ref([])
    const selectValue = ref(undefined)
    const input = ref(undefined)
    const page = reactive({
      page: 1,
      pagesize:10
    })
    const submitForm =() => {
      getdirectoryList({...page,directoryName:input.value,state:selectValue.value})
      }
    const state = ref([])
    // 每页显示信息条数
    const sizeChange = (val) => {
      page.pagesize = val
      getdirectoryList(page)
    }
    // 当前页码改变时触发
    const handleCurrentChange = (val) => {
      page.page = val
      getdirectoryList(page)
    }
    // 获取数据列表
    async function getdirectoryList(page) {
      const res = await directoryList(page)
      list.value = res.data
      console.log(res)
    }
    function clear() {
      input.value = undefined
      selectValue.value = undefined
    }
    // 搜索目录
    function search(id) { }
    // 修改目录
      // 修改弹窗
      async function changeSet(id,row){
        inheritAttrs.value = true
        showId.value = id
        if(id){
          formData.value.showId = id
        }
        if(row){
          formData.value.formData = {subjectID:row.subjectID,directoryName:row.directoryName,showId:row.id}
        }else{
          formData.value.formData = { subjectID: undefined,directoryName: undefined,}
        }
      }
    function modify(id) { }

    // 禁用按钮改变状态
    // 点击禁用，改变值为启用，状态值取反
    // async function changeState (id) {
    // getdirectoryList()
    // }
   // 修改状态
   async function changStatus (id,state){
      if(state == 1){
          await changeState({id,state:0})
          getdirectoryList()
      }else{
        await changeState({id,state:1})
        getdirectoryList()
      }
  }

    // 删除目录
    async function delTags(id) {
      ElMessageBox.confirm('此操作将永久删除该题目' + ', 是否继续?', '提示', { type: 'warning' }).then(() => {
        remove({ id })
          .then((response) => {
            ElMessage.success('删除成功' + '!')
            getdirectoryList(page)
          })
      }).catch(() => { })
    }
    onMounted(() => {
      getdirectoryList({...page,subjectID:route.query.id || undefined})
    })
    watch(()=>route.query,(val)=>{
      getdirectoryList(page)
    },{immediate:true})
    return {
      directors: [],
      subjects: [],
      selectValue,
      input,
      page,
      list,
      state,
      submitForm,
      status,
      clear,
      search,
      modify,
      changeState,
      changStatus,
      formData,
      route,
      router,
      delTags,
      changeSet,
      getdirectoryList,
      handleCurrentChange,
      sizeChange,
      inheritAttrs,
      parseTimeByString
    }
  }
}
</script>
<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  .titleBox {
    height: 50px;
    .title {
      line-height: 50px;
      margin: 15px 0 15px 0px;
      font-size: 15px;
    }
  }
  .head {
    .big {
      float: left;
      .one {
        float: left;
      }
      .two {
        float: right;
        margin-left: 60px;
      }
    }
    .three {
      float: right;
    }
  }
  .text {
    width: 1090px;
    height: 20px;
    margin-top: 20px;
    background-color: #f4f4f5;
    color: #909fc0;
    line-height: 20px;
    font-size: 13px;
  }
  .dataList {
    margin-top: 20px;
    .span {
      cursor: pointer;
      color: #6bc7ff;
    }
  }
  .pageBox {
    position: relative;
    height: 35px;
    margin-top: 15px;
    .pagination {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
